// 定义一个常用的颜色
@bgc: #b7d4a8;

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

html,
body {
  //
  position       : relative;
  overflow       : hidden;
  display        : flex;
  justify-content: center;
  align-items    : center;
  //
  font           : bold 20px "Courier";
  margin         : 0;
  padding        : 0;
  height         : 100%;
  width          : 100%;
  background     : linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

// 背景
.color {
  /* 绝对定位 */
  position: absolute;
  /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
  filter  : blur(200px);

  width : 90vw;
  height: 90vw;
}

.color:nth-child(1) {
  top       : -40vw;
  left      : -40vw;
  background: #ff359b;
}

.color:nth-child(2) {
  bottom    : -40vw;
  left      : 20vw;
  background: #fffd87;
}

.color:nth-child(3) {
  right     : -30vw;
  background: #00d2ff;
}

// .box {
//   position: relative;

.circle {
  position          : absolute;
  background        : rgba(255, 255, 255, 0.1);
  /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
  backdrop-filter   : blur(5px);
  box-shadow        : 0 25px 45px rgba(0, 0, 0, 0.1);
  border            : 1px solid rgba(255, 255, 255, 0.5);
  border-right      : 1px solid rgba(255, 255, 255, 0.2);
  border-bottom     : 1px solid rgba(255, 255, 255, 0.2);
  border-radius     : 50%;
  /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转 
    calc() 函数用于动态计算长度值 
    var() 函数调用自定义的CSS属性值x*/
  filter            : hue-rotate(calc(var(--x) * 70deg));
  /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
  // animation      : animate 10s linear infinite;
  // .animation(myDongHua,5s,infinite); // 1|动画名 2|动画时间 3|播放函数(比如：循环等)
  /* 动态计算动画延迟几秒播放 */
  animation-delay   : calc(var(--x) * -1s);

  width : 50vw;
  height: 50vw;

  // 毛玻璃效果
  filter: blur(2px);

  text-align : center;
  line-height: 50vw;

  z-index: 2;

}

#circle1 {
  top            : -20vh;
  left           : -30vw;
  // animation: animate1 30s linear infinite;
  // transform   : translate(100vw, 100vh);
}

#circle2 {
  top         : -10vh;
  left        : 50vw;
  // animation: animate2 20s linear infinite;
}

#circle3 {
  top    : 60vh;
  left   : 5vw;
  z-index: 2;
}

#circle4 {
  top         : 70vh;
  left        : 70vw;
  // animation: animate4 15s linear infinite;
}

#circle5 {
  top         : 30vh;
  left        : 40vw;
  // animation: animate5 20s linear infinite;
}

// }

// 圆的动画效果如下
// @keyframes animate1 {
//   from {
//     transform: translate()
//   }

//   to {
//     transform: translate(100vw, 100vh)
//   }
// }

// @keyframes animate2 {
//   from {
//     transform: translate(110vw, 0vh)
//   }

//   to {
//     transform: translate(10vw, 90vh)
//   }
// }

// @keyframes animate3 {
//   from {
//     transform: translate(20vw, 110vh)
//   }

//   to {
//     transform: translate(120vw, 100vh)
//   }
// }

// @keyframes animate4 {
//   from {
//     transform: translate(120vw, 110vh)
//   }

//   to {
//     transform: translate(60vw, 60vh)
//   }
// }

// @keyframes animate5 {
//   0% {
//     background: #a8edea;
//     left      : 0px;
//     top       : 0px;
//   }

//   100% {
//     background: #fed6e3;
//     left      : 0px;
//     top       : 0px;
//   }

//   from {
//     transform: translate(30vw, 40vh)
//   }

//   to {
//     transform: translate(50vw, 60vh)
//   }
// }



// 游戏介绍
#introduction {
  position: absolute;
  top     : 50px;
  width   : 100%;
  height  : 100px;
  z-index : 999;

  h1 {
    line-height: 100px;
    text-align : center;
  }

  #operation {
    position: absolute;
    left    : 70%;
    top     : 70%;

  }
}

#main {
  position        : absolute;
  top             : 50%;
  left            : 50%;
  transform       : translate(-50%, -50%);
  width           : 360px;
  height          : 420px;
  background-color: @bgc;
  border          : 10px solid black;
  border-radius   : 40px;
  z-index         : 999;

  // 开启弹性盒子
  display        : flex;
  flex-flow      : column;
  align-items    : center;
  justify-content: space-around;

  // <!-- 游戏主界面 -->
  #stage {
    position        : relative;
    width           : 304px;
    height          : 304px;
    border          : 2px solid black;
    background-color: @bgc;


    // 蛇🐍的样式
    #snake {
      &>div {
        position        : absolute;
        width           : 10px;
        height          : 10px;
        background-color: #000;
        border          : 1px solid @bgc;
      }
    }

    #food {
      position: absolute;
      top     : 100px;
      left    : 100px;
      width   : 10px;
      height  : 10px;

      display        : flex;
      flex-flow      : row wrap;
      justify-content: space-around;
      align-content  : space-around;

      &>div {
        width           : 4px;
        height          : 4px;
        background-color: #000;
        transform       : rotate(45deg);


      }
    }

  }

  // 游戏积分
  #score-panel {
    width          : 300px;
    display        : flex;
    justify-content: space-between;
  }
}